/* eslint-disable vue/html-self-closing */
<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-input
        v-model.trim="listQuery.userId"
        clearable
        placeholder="请输入用户ID"
      />
      <el-select
        v-model="listQuery.type"
        filterable
        placeholder="审核类型"
      >
        <el-option label="未审核" :value="0" />
        <el-option label="已审核" :value="1" />
      </el-select>
      <el-select
        v-model="listQuery.gender"
        filterable
        placeholder="性别"
      >
        <el-option label="未知" :value="0" />
        <el-option label="男" :value="1" />
        <el-option label="女" :value="2" />
      </el-select>
      <el-select
        v-model="listQuery.countryCode"
        clearable
        filterable
        placeholder="国家"
        style="width:100px"
      >
        <el-option
          v-for="(value, key, index) in countryCodeItem"
          :key="index"
          :label="value"
          :value="key"
        />
      </el-select>
      <el-select
        v-model="listQuery.identifyType"
        filterable
        placeholder="认证类型"
      >
        <el-option label="未认证" :value="0" />
        <el-option label="真人认证" :value="1" />
        <el-option label="主播认证" :value="2" />
      </el-select>
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="创建起始时间"
        end-placeholder="创建结束时间"
        value-format="yyyy-MM-dd"
        @change="daterangeChanged"
      />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >重置</el-button>
    </div>
    <div style="margin:10px 0">
      <el-radio-group v-model="isSelectAll">
        <el-radio-button
          :label="true"
          border
        >全选</el-radio-button>
        <el-radio-button :label="false">全不选</el-radio-button>
      </el-radio-group>
      <el-button
        type="warning"
        @click="onHandleAll"
      >批量通过</el-button>
    </div>

    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 350px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column
          align="left"
          label="基本信息"
        >
          <template slot-scope="{row}">
            <table class="photos-info">
              <tr>
                <td>用户ID:
                  <TooptipsCom :user-id="row.userInfoVo.userId" />
                  <span>{{ userAddress[row.userInfoVo.userId] }}</span>
                </td>
                <td>昵称：{{ row.userInfoVo.nickname }}</td>
              </tr>
              <tr>
                <td>性别：{{ row.userInfoVo.gender|gender }}</td>
                <td>魅力值：{{ row.userInfoVo.mValue }}</td>
              </tr>
              <tr>
                <td>土豪值：{{ row.userInfoVo.richValue }}</td>
                <td>现有积分：{{ row.userInfoVo.coinsNum }}</td>
              </tr>
              <tr>
                <td>钻石数量：{{ row.userInfoVo.diamondsNum }}</td>
                <td>
                  账户状态：
                  <span :class="{highlight:row.userInfoVo.forbidState!==0}">{{ row.userInfoVo.forbidState |forbidState }}</span>
                </td>
              </tr>
            </table>
          </template>
        </el-table-column>
        <el-table-column align="center" label="国家" width="130">
          <template slot-scope="{ row }">{{ row.userInfoVo.countryCode | countryCode }}</template>
        </el-table-column>
        <el-table-column
          align="left"
          label="照片墙"
          min-width="150"
        >
          <template slot-scope="{row}">
            <ul class="photos-list">
              <li
                v-for="img in row.photos"
                :key="img.src.photo"
                :class="{checked:img.checked}"
                @click.prevent="onCheckedPhoto(img)"
              >
                <el-badge :value="img.src.real? '真人': ''" class="badgeItem">
                  <i
                    v-if="img.checked"
                    class="el-icon-check"
                  />
                  <image-tooltip :image-id="img.src.photo">
                    <img
                      slot="img"
                      :src="img.src.photo"
                      @dblclick.stop.prevent="zoomImage(img.src.photo)"
                    >
                  </image-tooltip>
                </el-badge>
              </li>
            </ul>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="真人认证"
          width="120"
        >
          <template slot-scope="{row}">
            <el-image :key="row.liveImage" :src="row.liveImage" scroll-container="#pane-fourth .el-table__body-wrapper" lazy @click="zoomImage(row.liveImage)"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="时间">
          <template slot-scope="{row}">
            {{ row.applyTime|parseTime }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="认证类型"
        >
          <template slot-scope="{row}">
            <span>{{ row.identifyType |identifyType }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="isCheckedStatus"
          align="center"
          label="状态"
        >
          <template slot-scope="{ row }">{{ row.status | filterCheckStatus }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          fixed="right"
          width="240"
        >
          <template v-if="row.customerType !== 1" slot-scope="{row}">
            <el-button
              type="primary"
              size="mini"
              @click="onVerifyPhoto(row,'1','row')"
            >通过</el-button>
            <el-button
              type="warning"
              size="mini"
              @click="onVerifyPhoto(row,'2','row')"
            >不通过</el-button>
            <el-button
              v-if="row.userInfoVo.forbidState===0"
              type="danger"
              size="mini"
              @click="onForbid(row)"
            >封号</el-button>
            <el-button
              v-else
              disabled
            >已封号</el-button>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <ImageViewer
      :visible.sync="showImage"
      :url="imageUrl"
    />
    <DialogForbidAccount
      :visible.sync="dialogVisible"
      :user-ids="forbidAccounts"
      :forbid-type="'0'"
      @onSuccess="doSearch"
    />
  </div>
</template>

<script>
import TablePagination from '@/components/TablePagination'
import ImageViewer from '@/components/ImageViewer'
import DialogForbidAccount from '@views/account/components/DialogForbidAccount'

import { xhrAnchorPhotosList, xhrPhotosVerify } from '@api/anchor'
import AnchorMixin from './mixin'
import { getCountryItem } from '@/filters'
export default {
  name: 'RoleList',
  components: { TablePagination, ImageViewer, DialogForbidAccount },
  filters: {
    forbidState(val) {
      const obj = {
        0: '正常',
        1: '已封号',
        2: '禁聊'
      }
      return obj[val]
    },
    identifyType(val) {
      const obj = {
        0: '未认证',
        1: '真人认证',
        2: '主播认证'
      }
      return obj[val]
    }
  },
  mixins: [AnchorMixin],
  data() {
    return {
      list: null,
      total: 0,
      listQuery: {
        identifyType: null,
        type: 0,
        page: 1,
        limit: 20
      },
      daterangeValue: '',
      showImage: false,
      imageUrl: '',
      isSelectAll: false,
      dialogVisible: false,
      listLoading: false,
      userAddress: {},
      forbidAccounts: '',
      countryCodeItem: getCountryItem()
    }
  },
  watch: {
    isSelectAll(val) {
      this.setPhotosAllChecked(val)
    }
  },
  // created() {
  //   this.doSearch()
  // },
  methods: {
    doSearch() {
      this.listLoading = true
      if (!this.validateParams(this.listQuery)) {
        return
      }
      this.handleCheckedStatus()
      xhrAnchorPhotosList(this.listQuery)
        .then(resp => {
          const list = resp.data.list.map(item => Object.assign(item, { customerType: this.listQuery.type })) // 增加了是否是审核得字段
          list.forEach(item => {
            if (item.photos.length) {
              for (var i = 0; i < item.photos.length; i++) {
                const temp = {}
                temp.src = item.photos[i]
                temp.checked = false
                item.photos[i] = temp
              }
            }
          })
          this.list = list
          if (resp.data.userAddress){
            this.userAddress = resp.data.userAddress
          }
          this.$nextTick(() => {
            this.setPhotosAllChecked(false)
          })

          this.total = resp.data.total
          this.listLoading = false
        })
        .catch(err => {
          this.$message.error(err)
          this.listLoading = false
        })
    },
    onForbid(row) {
      this.forbidAccounts = row.userInfoVo.userId
      this.dialogVisible = true
    },
    setPhotosAllChecked(checkced) {
      if (this.list.length) {
        this.list.forEach(item => {
          if (item.photos.length) {
            for (var i = 0; i < item.photos.length; i++) {
              item.photos[i].checked = checkced
            }
          }
        })
      }
    },
    zoomImage(url) {
      this.showImage = true
      this.imageUrl = url
      console.log(url, this.imageUrl)
    },
    onCheckedPhoto(img) {
      console.log(img.checked)
      img.checked = !img.checked
    },
    generateParams(list, status, is_row) {
      const userPhotosList = []
      list.forEach(item => {
        if (item.photos.length) {
          const temp = {}
          let has_checked = false
          const photos = []
          const checked_photoes = []
          item.photos.forEach(photo => {
            photos.push(photo.src)
            if (photo.checked) {
              has_checked = true
              checked_photoes.push(photo.src)
            }
          })
          temp.status = status
          temp.applyTime = item.applyTime
          temp.userInfoVo = item.userInfoVo
          if (is_row) {
            if (has_checked) {
              temp.photos = checked_photoes
            } else {
              temp.photos = photos
            }
            userPhotosList.push(temp)
          } else {
            if (has_checked) {
              temp.photos = checked_photoes
              userPhotosList.push(temp)
            } else {
              temp.photos = []
              userPhotosList.push(temp)
            }
          }
        } else {
          userPhotosList.push({
            photos: [],
            status,
            applyTime: item.applyTime,
            userInfoVo: item.userInfoVo
          })
        }
      })
      return userPhotosList
    },
    onHandleAll() {
      const params = this.generateParams(this.list, '1')
      if (!params.length) {
        this.$message.warning('请至少选择一条数据')
        return
      }
      // 过滤掉没有一张图片的数据
      const tmp = []
      for (const i in params) {
        if (params[i].photos.length > 0) {
          tmp.push(params[i])
        }
      }
      this.onVerify(tmp, '1')
    },
    // is_row 如果是当前行通过可不选中照片
    onVerifyPhoto(row, status, is_row) {
      const params = this.generateParams([row], status, is_row)
      this.onVerify(params, status)
    },
    onVerify(params, status) {
      const title = status === '1' ? '通过' : '拒绝'
      const post_params = {
        userPhotosList: params
      }
      this.$confirm('确定' + title + '审核？').then(() => {
        xhrPhotosVerify(post_params)
          .then(resp => {
            this.$message.success('操作成功')
            this.doSearch()
          })
          .catch(err => {
            this.$message.error(err)
          })
      })
    }
  }
}
</script>
<style lang="scss">
.photos-info {
  tr {
    background: none;
    td {
      border: none;
      padding: 5px;
      white-space: nowrap;
    }
  }
}
.photos-list {
  display: flex;
  flex-wrap: wrap;
  li {
    width: 100px;
    height: 100px;
    margin: 5px;
    list-style: none;
    cursor: pointer;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .el-icon-check {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 40px;
      height: 40px;
      margin: auto;
      color: #fff;
      background: #67c23a;
      border-radius: 50%;
      font-size: 30px;
      line-height: 40px;
      text-align: center;
    }
  }
}
</style>
